<template>
	<div class="found padding">
		<div class="cl_menu_div">
			<ul class="cl_menu">
				<router-link tag="li" :to="`/found/rank/${item.menu_id}`" v-for="item in nav" :key="item.menu_id">{{ item.menu_name }}</router-link>
			</ul>
		</div>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
	</div>
</template>

<script>
    import { getmenu } from '@/api'
    export default {
    	data(){
            return{
                nav: null,
            }
        },
        mounted(){
            //获取频道列表
			getmenu().then(res => {
				let nav = res.data;
				nav.reverse();
				nav = nav.splice(1);
				nav.length=8;
				this.nav = nav;
			});
        },
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    @import 'src/style/mixin';
	.cl_menu_div {
		position: fixed;
		top: 1.95rem;
		left: 0;
		width: 100%;
		z-index: 2;
		background: #fff;
		overflow:scroll; 
		-webkit-overflow-scrolling:touch;
	}
	.cl_menu {
		padding:0 0.5rem;
		line-height: 1.5rem;
		font-size: 0.6rem;
		display: flex;
		justify-content: space-between;
		li {
			&.active {
				color: $pink;
			}
		}
	}
</style>
